<template>
  <div class="options">
    <div v-for="(item, index) in infos" :key="index">
      <div class="options-item">
        <!-- <img :src="'@/assets/images/profile/' + item.icon" /> -->
        <!-- <img :src="item.icon" alt="" /> -->
        <img src="@/assets/img/profile/message.png" alt="" />
        <span>{{ item.info }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    infos: {
      type: Array,
      default: () => []
    }
  }
};
</script>

<style scoped>
.options {
  border-top: 18px solid #f8f8f8;
}

.options-item {
  height: 50px;
  line-height: 50px;
  background: #fff;
  font-size: 16px;
  margin-left: 15px;
  border-bottom: 1px solid #f8f8f8;
}

.options-item:last-child {
  border-bottom: none;
}

.options-item img {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

.options-item span {
  vertical-align: middle;
  margin-left: 8px;
}
</style>
